<template>
  <codemirror v-model:value="value" :options="options" />
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import Codemirror from 'codemirror-editor-vue3';
  import 'codemirror/lib/codemirror.css';
  // 自动刷新
  import 'codemirror/addon/display/autorefresh';
  import 'codemirror/mode/javascript/javascript.js';
  import 'codemirror/theme/juejin.css';
  // 括号显示匹配
  import 'codemirror/addon/edit/matchbrackets';
  import 'codemirror/addon/selection/active-line';

  export default defineComponent({
    name: 'CodeMirror',
    props: ['mode'],
    components: { Codemirror },
    setup(props, { emit }) {
      const value = ref('');
      const options = ref({
        autorefresh: true,
        smartIndent: true,
        tabSize: 2,
        lineWrapping: true,
        theme: 'juejin',
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
        mode: props.mode,
        indentWithTabs: true,
        foldGutter: true,
        inputStyle: 'textarea',
        autoCloseBrackets: true, // 自动闭合符号
        lint: true,
        autoCloseTags: true,
        matchBrackets: true, // 光标匹配括号
        matchTags: { bothTags: true },
        scrollbarStyle: 'native',
      });
      return {
        options,
        value,
      };
    },
  });
</script>
